

import React from 'react';
import { history } from 'umi';
import { Card, Row, Col, message, Form, Radio, DatePicker, Space, Input } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { createFromIconfontCN } from '@ant-design/icons';
import ProForm, { ProFormText, ProFormDateRangePicker, ProFormSelect } from '@ant-design/pro-form';
import UseTimeItem from './components/UseTimeItem'

const { RangePicker } = DatePicker;

const waitTime = (time = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2686151_z12bsn3a31.js',
});

const Marketing = () => {
    const header = {
        title: '添加优惠券',
        breadcrumb: {
            routes: [
                {
                    path: '',
                    breadcrumbName: '应用',
                },
                {
                    path: '/product/category',
                    breadcrumbName: '营销玩法',
                },
                {
                    path: '/product/category',
                    breadcrumbName: '优惠券',
                },
                {
                    path: '',
                    breadcrumbName: '当前页面',
                },
            ],
        }
    }
    return (
        <PageContainer header={header}>
            <ProForm
                labelCol={{ span: 10 }}
                layout='horizontal'
                submitter={{
                    render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
                }}
                onFinish={async (values) => {
                    await waitTime(2000);
                    console.log(values);
                    message.success('提交成功');
                }}
                params={{}}
                request={async () => {
                    await waitTime(100);
                    return {
                        name: '蚂蚁设计有限公司',
                        useMode: 'chapter',
                    };
                }}
            >
                <Row gutter={[0, 24]}>
                    <Col span={24}>
                        <Card title='基本信息'>
                            <ProFormText
                                width="md"
                                name="name"
                                label="优惠券名称"
                                placeholder="请输入名称"
                            />
                            <ProFormText
                                width="md"
                                name="name"
                                label="发放总量"
                                placeholder="请输入名称"
                            />
                            <ProFormText
                                width="md"
                                name="name"
                                label="优惠券名称"
                                placeholder="请输入名称"
                            />
                            <Form.Item
                                // rules={[{ validator: checkPrice }]}
                                name="price"
                                label="条件类型"
                            >
                                <UseTimeItem />
                            </Form.Item>
                        </Card>
                    </Col>
                    <Col span={24}>
                        <Card title='优惠内容'>
                            <Form.Item
                                // rules={[{ validator: checkPrice }]}
                                name="price"
                                label="门槛金额"
                            >
                                <Radio.Group
                                    style={{ marginTop: 5 }}>
                                    <Space direction="vertical">
                                        <Radio value={1}>
                                            无门槛使用
                                        </Radio>
                                        <Radio value={2}>
                                            <Space>
                                                <span>hehe</span>
                                                <Input placeholder="Basic usage" />
                                            </Space>

                                        </Radio>
                                    </Space>
                                </Radio.Group>
                            </Form.Item>
                            <ProFormText
                                width="md"
                                name="name"
                                label="优惠金额"
                                placeholder="请输入名称"
                            />
                            <Form.Item
                                // rules={[{ validator: checkPrice }]}
                                name="price"
                                label="适用商品"
                            >
                                <Radio.Group
                                    style={{ marginTop: 5 }}>
                                    <Space direction="vertical">
                                        <Radio value={1}>
                                            无门槛使用
                                        </Radio>
                                        <Radio value={2}>
                                            指定商品可用
                                        </Radio>
                                        <Radio value={3}>
                                            指定分类可用
                                        </Radio>
                                        <Radio value={4}>
                                            指定商品不可用
                                        </Radio>
                                        <Radio value={5}>
                                            指定分类不可用
                                        </Radio>
                                    </Space>
                                </Radio.Group>
                            </Form.Item>
                        </Card>
                    </Col>
                    <Col span={24}>
                        <Card title='发放领取'>
                            <ProFormText
                                width="md"
                                name="name"
                                label="每人限领"
                                placeholder="请输入名称"
                            />
                            <ProFormText
                                width="md"
                                name="name"
                                label="分享设置"
                                placeholder="请输入名称"
                            />
                            <ProFormText
                                width="md"
                                name="name"
                                label="新客领取"
                                placeholder="请输入名称"
                            />
                        </Card>
                    </Col>
                    <Col span={24}>
                        <Card title='其他设置'>
                            <ProFormText width="sm" name="id" label="到期提醒" />
                            <ProFormText name="project" width="md" disabled label="退款设置" initialValue="xxxx项目" />
                            <ProFormText width="xs" name="mangerName" disabled label="上架状态" initialValue="启途" />
                            <ProFormText width="xs" name="mangerName" disabled label="使用说明" initialValue="启途" />
                        </Card>
                    </Col>
                </Row>
            </ProForm>
        </PageContainer>
    );
};

export default Marketing;
